<template>
  <div class="main">
    <div class="bigHeader">
      <img class="bigHeaderContentImg" src="../../assets/bigSreen/top.png" alt="">
      <div class="bigHeaderLeft">
        <div class="bigHeaderLeftContent1">

        </div>
        <div class="bigHeaderLeftContent1Time">
          <span style="font-size: 15px;color: #FFFFFF;">{{ date  }} {{ week }}</span>
          <span style="font-size: 22px;color: #66FFFF;margin-left: 15px">{{ time }}</span>
        </div>
      </div>
      <div class="bigHeaderContent">

        <div style="margin-top: -20px">
          <span class="bigHeaderContentSpan">信丰伟业移动终端中华区可视化系统</span>
        </div>
      </div>
      <div class="bigHeaderRight">
        <div class="bigHeaderLeftContent1">

        </div>
        <div class="bigHeaderLeftContent1Time" style="justify-content: left">
          <span style="font-size: 15px;color: #FFFFFF;">天气</span>
          <span style="font-size: 22px;color: #66FFFF;margin-left: 15px">晴</span>
        </div>
      </div>
    </div>
    <div class="bigContent">
      <div class="bigContentLeft">
        <div class="bigContentLeftContent1">
          <img class="bigContentLeftImg" src="../../assets/bigSreen/contentLeft.png" alt="">
          <div class="bigContentLeftContent1Title">
            <div class="bigContentLeftContent1TitleHeader">
              <div class="flexDiv">
                <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
                <span style="margin-left: 8px">今日在线：</span>
                <span class="bigContentLeftContent1TitleNumber">{{toDayCheckTotal}}</span>
              </div>
              <div>
                <span>单位：台</span>
              </div>
            </div>
          </div>
          <div id="toDayCheck">
          </div>
        </div>
          <div class="bigContentLeftContent2">
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">最近日活/月活</span>
            </div>
            <div class="left1Content">
              <div class="left1ContentDay">
                <div class="left1ContentDayDiv1" style="height: 24px">
                 <span class="left1ContentDaySpan1">
                    {{offLineData.latestDayCount}}台
                 </span>
                </div>
                <div class="left1ContentDayDiv1" style="margin-top: 4px;height: 14px">
                  <span class="left1ContentDaySpan1" style="font-size: 14px">最近日活</span>
                </div>
                <div class="left1ContentDayDiv2">
                  <div class="left1ContentDayDiv2Content">
                    <p>{{offLineData.dayOfYearHighestCount}}台</p>
                    <p class="marginR5">本年最高日活</p>
                  </div>
                  <div class="fenge">

                  </div>
                  <div class="left1ContentDayDiv2Content">
                    <p>{{offLineData.hisDayHighestCount}}台</p>
                    <p class="marginL5">历史最高日活</p>
                  </div>
                </div>
              </div>
              <div class="left1ContentMonth">
                <div class="left1ContentDayDiv1" style="height: 24px">
                 <span class="left1ContentDaySpan1" style="color: #00FFF5;">
                   {{offLineData.latestMonthCount}}台
                 </span>
                </div>
                <div class="left1ContentDayDiv1" style="margin-top: 4px;height: 14px">
                  <span class="left1ContentDaySpan1" style="font-size: 14px;color: #00FFF5">最近月活</span>
                </div>
                <div class="left1ContentDayDiv2">
                  <div class="left1ContentDayDiv2Content">
                    <p> {{offLineData.monthHighestCount}}台</p>
                    <p class="marginR5">本年最高月活</p>
                  </div>
                  <div class="fenge">

                  </div>
                  <div class="left1ContentDayDiv2Content">
                    <p>{{offLineData.hisMonthHighestCount}}台</p>
                    <p class="marginL5">历史最高月活</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bigContentLeftContent2">
            <div class="bigContentLeftContent1Title">
              <div class="bigContentLeftContent1TitleHeader">
                <div class="flexDiv">
                  <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
                  <span style="margin-left: 8px">年度活跃度统计</span>
                </div>
                <div>
                  <span>单位：台</span>
                </div>
              </div>

            </div>
            <div id="monthMax" style="height: 175px"></div>
          </div>
          <div class="bigContentLeftContent2" >
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">活跃度区域排名TOP5</span>
            </div>
            <div id="monthMaxCountries" style="height: 175px"></div>
          </div>
      </div>
      <div class="bigContentCenter">
        <div class="bigContentCenterHeader">
          <img src="../../assets/bigSreen/centerHeader.png" alt="" class="bigContentCenterHeaderImg">
          <img src="../../assets/bigSreen/loading.png" alt="" class="bigContentCenterHeaderImgLoading" >
          <div class="bigContentCenterHeaderCount">
            <div class="bigContentCenterHeaderCountLeft">
              <img src="../../assets/bigSreen/centerHeaderLeft.png" alt="" width="100%" height="40px">
              <span class="bigContentCenterHeaderCountSpan" style="left: 218px">设备总数</span>
              <div style="margin-top: 0px" class="bigContentCenterHeaderCountBottom">
                <div v-for="(item,index) in totalCount" :key="index" class="bigContentCenterHeaderCountBottomItem">
                  {{item}}
                </div>
              </div>
            </div>
            <div class="bigContentCenterHeaderCountRight">
              <img src="../../assets/bigSreen/centerHeaderRight.png" alt="" width="100%" height="40px">
              <span class="bigContentCenterHeaderCountSpan" style="left: 104px">实时在线设备总数</span>
              <div style="margin-top: 0px" class="bigContentCenterHeaderCountBottom">
                <div v-for="(item,index) in onlineCount" :key="index" class="bigContentCenterHeaderCountBottomItem" style="color: #00FFF4 ">
                  {{item}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bigContentCenterContent">
          <img src="../../assets/bigSreen/centerContent.png" alt="" class="bigContentCenterContentImg">
<!--          <div class="bigContentLeftContent1Title" style="margin: 0 !important;top: 20px;left: 13px">-->
<!--            <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">-->
<!--            <span style="margin-left: 8px">实时展示</span>-->
<!--          </div>-->
          <div id="map"></div>
        </div>
      </div>
      <div class="bigContentRight">
        <div class="bigContentLeftContent1">
          <img class="bigContentLeftImg" src="../../assets/bigSreen/contentLeft.png" alt="">
          <div class="bigContentLeftContent1Title">
            <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
            <span style="margin-left: 8px">今日激活：</span>
            <span class="bigContentLeftContent1TitleNumber">{{activatedCount.todayCount}}台</span>
          </div>
          <div class="bigContentLeftContent1Main">
            <div class="bigContentLeftContent1MainItem">
              <div class="bigContentLeftContent1MainSpan">昨日激活</div><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('yesterdayCount')" status="success" :format="format"></el-progress>
            </div>
            <div class="bigContentLeftContent1MainItem">
              <div class="bigContentLeftContent1MainSpan">本月单日最高激活</div><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('monthCount')" :format="format2"></el-progress>
            </div>
            <div class="bigContentLeftContent1MainItem">
              <div class="bigContentLeftContent1MainSpan">年度单日最高激活</div><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('yearHistoryCount')" status="exception" :format="format4"></el-progress>
            </div>
            <div class="bigContentLeftContent1MainItem">
              <div class="bigContentLeftContent1MainSpan">历史单日最高激活</div><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('historyCount')" status="warning" :format="format3"></el-progress>
            </div>
          </div>
        </div>
        <div class="bigContentLeftContent2">
          <div>
            <div class="bigContentLeftContent1Title">
              <div class="bigContentLeftContent1TitleHeader">
                <div class="flexDiv">
                  <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
                  <span style="margin-left: 8px">激活量年度统计</span>
                </div>
                <div>
                  <span>单位：台</span>
                </div>
              </div>
            </div>
          </div>
          <div id="monthNewCount">
          </div>
        </div>
        <div class="bigContentLeftContent2">
          <div>
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">设备区域排名TOP5</span>
            </div>
          </div>
            <div class="facilityCountryRatio">
              <div v-for="item in facilityCountryRatioList">
                <div>
                  <img :src="item.img" alt="" class="facilityCountryRatioImg">
                </div>
                <div class="facilityCountryRatioContent">
                  <p>{{item.country}}</p>
                  <p style="font-size: 14px;margin-top: 5px">{{item.ratio}}%</p>
                </div>
              </div>
            </div>
        </div>
        <div class="bigContentLeftContent2">
          <div>
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">设备型号排名TOP5</span>
            </div>
          </div>
          <div id="facilityTypeRatio">
          </div>
        </div>
      </div>
      <div class="version">
        <span>MTVS_V1.0.0.20220510</span>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import {getTodayOnlineTrend,
    getOffLineData, getTop5Country, getTotalCount,
    getMonthNewCount, getFacilityCountryRatio, getFacilityTypeRatio, getActivatedCount, equipmentMap} from './api'
  import ratio1 from '../../assets/bigSreen/ratio1.png'
  import ratio2 from '../../assets/bigSreen/ratio2.png'
  import ratio3 from '../../assets/bigSreen/ratio3.png'
  import ratio4 from '../../assets/bigSreen/ratio4.png'
  import ratio5 from '../../assets/bigSreen/ratio5.png'
  import "echarts/map/js/china.js"; // 引入中国地图数据
  import 'echarts/map/js/world.js'
  import 'echarts-gl'
  import img from '../../assets/bigSreen/8.png'
  import img8 from '../../../public/img/8.png'
  export default {
    data(){
      return{
        totalCount:'',//设备总数
        onlineCount:'',//设备在线总数
        offLineData:{},//在线量非实时区域数据
        facilityCountryRatioList:[],//设备分布
        ratioList:[ratio1,ratio2,ratio3,ratio4,ratio5],
        img,
        //激活数检测
        activatedCount:{
          "todayCount": 420,
          "yesterdayCount": 650,
          "monthCount": 180000,
          "historyCount": 1020
        },
        img8,
        toDayCheckTotal:0,//今日在线检测总量
        date:'',
        time:'',
        week:'',
        timer:null, // 计时器
      }
    },
    created() {
      setInterval(()=>{
        this.time =  this.getDate('hh:mm:ss')
      })
      this.week = this.getWeekDay()
      this.date = this.getDate('yyyy-MM-dd')
    },
    mounted() {
      this.init();
    },
    methods:{
      getWeekDay(){
        let now = new Date()
        let day = now.getDay();
        let weeks = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六')
        let week = weeks[day]
        return week
      },
      getDate(fmt){
        let date = new Date()
        var o = {
          "M+": date.getMonth() + 1, // 月份
          "d+": date.getDate(), // 日
          "h+": date.getHours(), // 小时
          "m+": date.getMinutes(), // 分
          "s+": date.getSeconds(), // 秒
          "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
          "S": date.getMilliseconds() // 毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      },
      init(){
        this.initToDayCheck();
        this.initMonthMax();
        this.initMonthMaxCountries();
        this.getTotalCount();
        this.getMonthNewCount();
        this.getFacilityCountryRatio();
        this.getFacilityTypeRatio();
        this.equipmentMap();
        //this.initMap();
        this.getActivatedCount();
        this.timer = setInterval(()=>{
          this.initToDayCheck();
          //this.init();
          this.initMonthMax();
          this.initMonthMaxCountries();
          this.getTotalCount();
          this.getMonthNewCount();
          this.getFacilityCountryRatio();
          this.getFacilityTypeRatio();
          this.equipmentMap();
          //this.initMap();
          this.getActivatedCount();
        },5000)
      },
      forMatNumber(val = ''){
        if(val.length<8){
          let bu = 8-val.length;
          for(let i = 0;i<bu;i++){
            val = '0' +val
          }
        }
        return val
      },
      //获取设别总数
      getTotalCount(){
        getTotalCount(this,{
          areaType:1
        }).then(res=>{
          let data = res.data.data
          this.totalCount = data?.totalCount>-1? this.forMatNumber(data?.totalCount.toString()):'';
          this.onlineCount = data?.onlineCount >-1?this.forMatNumber(data?.onlineCount.toString()):''
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": {
        //     "totalCount": 150000,
        //     "onlineCount": 1200
        //   },
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.totalCount = res.data.totalCount.toString();
        // this.onlineCount = res.data.onlineCount.toString()
      },
      //获取今日在线量检测
      initToDayCheck(){
        getTodayOnlineTrend(this,{
          areaType:1
        }).then(res=>{
          console.log(res)
          let data = res.data.data||{};
          this.drawToDayCheck(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": {
        //     "historyHighestCount": 1000,
        //     "monthHighestCount": 400,
        //     "yesterDayHighestCount": 580,
        //     "map": [
        //       {
        //         "xTime": "08:00",
        //         "yCount": 1000,
        //       },
        //       {
        //         "xTime": "09:00",
        //         "yCount": 500,
        //       },
        //       {
        //         "xTime": "10:00",
        //         "yCount": 300,
        //       }
        //     ]
        //   },
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.drawToDayCheck(res.data)
      },
      //画图表今日在线量检测
      drawToDayCheck(data){
        var chart1 = echarts.init(document.getElementById('toDayCheck'))
        if(!data.map || (!data.map.length)){
          return
        }
        let yCount = data.map.map(item=>{
          return item.y
        })
        this.toDayCheckTotal = data.todayDayCount||0;
        let xCount = data.map.map(item=>{
          return item.x
        })
        let more = xCount.length&&xCount[xCount.length-1]?Number(xCount[xCount.length-1].substring(0,2)):''
        if(more<24){
          more = more+1
        }else {
          more=0
        }
        xCount.push(more+':00')
        yCount.push(0)

        let option = {
          grid:{
            top:'8px',
            bottom:"38px"
          },
          xAxis: {
            type: 'category',
            data: xCount,
            boundaryGap: false,
            axisLine:{
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            splitLine:{
              show:false
            },
            axisLabel:{
              formatter: function (value, index){
                if(value>1000){
                  return `${(value/1000)}千`
                }else {
                  return value
                }
              }, // 在每个x轴坐标都添加了单位
            }
          },
          series: [
            {
              name: '数据',
              data: yCount,
              type: 'line',
              // markLine:{
              //   data:[
              //     // {
              //     //   name: '历史最高值',
              //     //   yAxis: data.historyHighestCount,
              //     //   lineStyle:{
              //     //     type:"solid",
              //     //     color:'#CC8BFF',
              //     //   },
              //     //   label:{
              //     //     formatter: '历史最高\n {c}',
              //     //     position:'insideEndTop',
              //     //     fontSize: 8,
              //     //     color: '#CC8BFF'
              //     //   }
              //     // },
              //     // {
              //     //   name: '本月最高值',
              //     //   yAxis: data.monthHighestCount,
              //     //   lineStyle:{
              //     //     type:"solid",
              //     //     color:'#1480F0',
              //     //   },
              //     //   label:{
              //     //     formatter: '本月最高\n {c}',
              //     //     position:'insideEndTop',
              //     //     fontSize: 8,
              //     //     color: '#1480F0'
              //     //   }
              //     // },
              //     // {
              //     //   name: '昨日最高值',
              //     //   yAxis: data.yesterDayHighestCount,
              //     //   lineStyle:{
              //     //     type:"solid",
              //     //     color:'#00FFF4',
              //     //   },
              //     //   label:{
              //     //     formatter: '昨日最高\n {c}',
              //     //     position:'insideEndTop',
              //     //     fontSize: 8,
              //     //     color: '#00FFF4'
              //     //   }
              //     // },
              //   ]
              // },
              markPoint: {
                data: [
                  {
                    symbol:'circle',
                    symbolSize:10,
                    type: 'max',
                    name: 'Max' ,
                    label:{
                      formatter: '',
                      backgroundColor:'#FDDB65',
                      color:'#000000',
                      width:60,
                      height:23,
                      fontSize:8,
                      borderRadius:5,
                      offset:[0,-20]
                    }
                  },
                ]
              },
              lineStyle :{
                color:'#FFDA4A '
              },
              areaStyle:{
                color:{
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#FFDA4A ' // 0% 处的颜色
                  },
                    {
                      offset: 0.7, color: 'rgba(255,218,74,0.5) ' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(255,218,74,0.1)' // 100% 处的颜色
                    }],
                  global: false // 缺省为 false
                }
              },
              smooth:true
            },
          ]
        };

        option && chart1.setOption(option);
      },
      //获取在线量非实时MonthMax区域数据
      initMonthMax(){
        getOffLineData(this,{
          areaType:1
        }).then(res=>{
          console.log(res)
          let data = res.data.data||{}
          this.offLineData = data||{}
          this.drawMonthMax(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": {
        //     "latestDayCount": 420,
        //     "latestMonthCount": 18000,
        //     "dayOfYearHighestCount": 890,
        //     "hisDayHighestCount": 890,
        //     "monthHighestCount": 32000,
        //     "hisMonthHighestCount": 32000,
        //     "map": [
        //       {
        //         "month": 1,
        //         "count": 200
        //       },
        //       {
        //         "month": 2,
        //         "count": 400
        //       }
        //     ]
        //   },
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // };
        // this.offLineData = res.data||{}
        // this.drawMonthMax(res.data)
      },
      //画在线量非实时区域数据
      drawMonthMax(data){
        if(!data.map || !data.map.length){
          return
        }
        let yCount = data.map.map(item=>{
          return item.count
        })
        let xCount = data.map.map(item=>{
          return item.month +'月'
        })
        var chart1 = echarts.init(document.getElementById('monthMax'))
        let option = {
          grid:{
            top:'15px',
            bottom:"25px",
          },
          legend: {
            right:13,
            top:-4,
            textStyle :{
              color:'#05A998',
              fontSize:14,
            }
          },
          xAxis: {
            type: 'category',
            data: xCount,
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            splitLine:{
              lineStyle:{
                color:'rgba(255,255,255,.15)'
              }
            },
            axisLabel:{
              formatter: function (value, index){
                if(value>1000){
                  return `${(value/1000)}千`
                }else {
                  return value
                }
              },
            }
          },
          series: [
            {
              name: '本月最高日活',
              data: yCount,
              type: 'bar',
              itemStyle:{
                color:'#63FBFC',
              },
              barMaxWidth:14
            }
          ]
        };

        option && chart1.setOption(option);
      },
      initMonthMaxCountries(){
        getTop5Country(this,{
          areaType:1
        }).then(res=>{
          console.log(res)
          let data = res.data.data ||[]
          this.drawMonthMaxCountries(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "country": "中国",
        //       "count": 1000,
        //     },
        //     {
        //       "country": "日本",
        //       "count": 500,
        //     },
        //     {
        //       "country": "韩国",
        //       "count": 300,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.drawMonthMaxCountries(res.data)

      },
      drawMonthMaxCountries(data){
        var chart1 = echarts.init(document.getElementById('monthMaxCountries'))
        let xCount = data.map((item,index)=>{
          let colors = ['#E7B600','#00B2E2','#48C0C5','#8077EA','#0079EA']
          return {
            value:item.count,
            itemStyle: {
              color: colors[index]
            }
          }
        })
        let yCount = data.map(item=>{
          return item.country
        })
        let option = {
          grid:{
            top:'15px',
            bottom:'26px',
          },
          xAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              },
            },
            // axisLabel:{
            //   color:'rgba(0,0,0)'
            // },
            splitLine:{
              lineStyle:{
                color:'rgba(255,255,255,.15)'
              }
            }
          },
          yAxis: {
            type: 'category',
            data:yCount,
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              },

            },
            axisLabel:{
                show:true,
                textStyle:{
                  fontSize:14,
                }
              }
          },
          series: [
            {
              name: '上月活跃TOP5国家',
              data: xCount,
              type: 'bar',
              itemStyle:{
                color:'#63FBFC'
              },
              barMaxWidth:14,
              label: {
                show: true,
                position: 'right',
                color:'#ffffff',
                formatter: '{c}台',
              },
            }
          ]
        };

        option && chart1.setOption(option);
      },
      // 每月新增月活
      getMonthNewCount(){
        getMonthNewCount(this,{
          areaType:1
        }).then(res=>{
          console.log(res)
          let data = res.data.data ||[]
          this.drawMonthNewCount(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "month": "1",
        //       "count": 200,
        //     },
        //     {
        //       "month": "2",
        //       "count": 300,
        //     },
        //     {
        //       "month": "3",
        //       "count": 100,
        //     },
        //     {
        //       "month": "4",
        //       "count": 150,
        //     },
        //     {
        //       "month": "5",
        //       "count": 180,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.drawMonthNewCount(res.data)
      },
      drawMonthNewCount(data){
        let yCount = data.map((item,index)=>{
          let obj = {};
          if(index===1){
            obj = {
              value:item.count,
              label: {
                show: true,
                position: 'top',
                color:'#FEDB65'
              },
            }
          }else {
            obj = {
              value:item.count,
            }

          }
          return obj
        })
        let xCount = data.map(item=>{
          return item.month+'月'
        })
        var chart1 = echarts.init(document.getElementById('monthNewCount'))
        let option = {
          grid:{
            top:'15px',
            bottom:"28px"
          },
          xAxis: {
            type: 'category',
            data: xCount,
            boundaryGap: false,
            axisLine:{
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            splitLine:{
              lineStyle:{
                color:'rgba(255,255,255,.15)'
              }
            },
            axisLabel:{
              formatter: function (value, index){
                if(value>1000){
                  return `${(value/1000)}千`
                }else {
                  return value
                }
              },
            }
          },
          series: [
            {
              data: yCount,
              type: 'line',
              lineStyle :{
                color:'#FFDA4A '
              },
              smooth:true,
              itemStyle:{
                color:'#FEDB65'
              },

            }
          ]
        };

        option && chart1.setOption(option);
      },
      //获取设备分布
      getFacilityCountryRatio(){
        getFacilityCountryRatio(this,{
          areaType:1
        }).then(res=>{
          let data = res.data.data ||[];
          this.facilityCountryRatioList = data.map((item,index)=>{
            let obj = {
              ...item,
              img:this.ratioList[index]
            }
            return obj
          })
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "country": "中国",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "country": "日本",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "country": "韩国",
        //       "ratio": 39,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.facilityCountryRatioList = res.data.map((item,index)=>{
        //   let obj = {
        //     ...item,
        //     img:this.ratioList[index+1]
        //   }
        //   return obj
        // })

      },
      //型号分布
      getFacilityTypeRatio(){
        getFacilityTypeRatio(this,{
          areaType:1
        }).then(res=>{
          let data = res.data.data||[];
          this.drawFacilityTypeRatio(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "type": "mifi-v1",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "type": "mifi-v2",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "type": "mifi-v3",
        //       "ratio": 39,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.drawFacilityTypeRatio(res.data)
      },
      drawFacilityTypeRatio(data){
        let pieData = data.map((item,index)=>{
          return {
            value:item.ratio,
            name:item.type,
            itemStyle:''
          }
        })
        var chart1 = echarts.init(document.getElementById('facilityTypeRatio'))
        let option = {
          legend: {
            orient: 'vertical',
            left: 'right',
            textStyle:{
              color:'#fff'
              }
            },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              avoidLabelOverlap:true,
              radius: ['20%', '50%'],
              label: {
                alignTo: 'edge',
                formatter: '{d}%',
                minMargin: 5,
                edgeDistance: 20,
                lineHeight: 15,
                fontSize: 14,
                rich: {
                  time: {
                    color: '#999'
                  }
                }
              },
              // labelLine: {
              //   show: true
              // },
              labelLine: {
                length: 15,
                length2: 5,
                maxSurfaceAngle: 80
              },
              data: pieData,
              itemStyle:{
                borderWidth:1,
                borderColor:'#ffffff',
                color:function (parmas,index) {
                  console.log(parmas)
                  console.log(index)
                  let colorList = ['#C87DEE','#4979CB','#50AE89','#EF8E54','#8252DB']
                  return colorList[parmas.dataIndex||0]
                }
              }
            }
          ]
        }
        option && chart1.setOption(option);
      },
      equipmentMap(){
        equipmentMap(this,{
          areaType:1
        }).then(res=>{
          console.log(res)
          let data = res.data.data||{};
          this.initMap(data)
        })
      //   let res = {
      //     "attachment": null,
      //     "code": 200,
      //     "data": {
      //       "spread": [
      //         {"startName": "深圳", "endName": "深圳", "value": 5200},
      //         {"startName": "深圳", "endName": "北京", "value": 3200},
      //         {"startName": "深圳", "endName": "长沙", "value": 2900},
      //       ],
      //       "allCityPoint": {
      //         "福州": [119.4543, 25.9222],
      //         "长春": [125.8154, 44.2584],
      //         "重庆": [107.7539, 30.1904],
      //         "西安": [109.1162, 34.2004],
      //         "成都": [103.9526, 30.7617],
      //         "常州": [119.4543, 31.5582],
      //         "北京": [116.4551, 40.2539],
      //         "北海": [109.314, 21.6211],
      //         "海口": [110.3893, 19.8516],
      //         "长沙": [113.019455, 28.200103],
      //         "上海": [121.40, 31.73],
      //         "内蒙古": [106.82, 39.67],
      //         "深圳":[114.085947,22.547]
      //       }
      // },
      //   "errCode": 200,
      //     "exception": "",
      //     "msg": "成功",
      //     "success": true
      // }
      //  this.initMap(res.data)
      },
      initMap(data){
        var chart1 = echarts.init(document.getElementById('map'))
        var geoCoordMap = data.allCityPoint || {}
        var GZData = data.spread || [];
        GZData = [{
          endName: "深圳",
          startName: "深圳",
          value: 10000000
        },...GZData]
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem.startName];
            var toCoord = geoCoordMap[dataItem.endName];
            if ((fromCoord && toCoord)|| dataItem.endName === '深圳') {
              res.push({
                fromName: dataItem.startName,
                toName: dataItem.endName,
                coords: [fromCoord, toCoord],
                startName:dataItem.startName
              });
            }
          }
          return res;
        };

        var color = ['#19BDA2'];
        var color2 = ['#EBFA29']
        var series = [];
        [
          ['深圳', GZData]
        ].forEach(function (item, i) {
          series.push(
            {
            name: item[0],
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'arrow',
              symbolSize: 5
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 2,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            data: convertData(item[1])
          },
            {
            name: item[0],
            type: 'effectScatter',
            coordinateSystem: 'geo',
              center:undefined,
            zlevel: 2,
              effectType:'ripple',
            rippleEffect: {
              brushType: 'fill',
              color:'#19BDA2'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: function (val) {
              if(val.length>2){
                if(val[3] === '深圳'){
                  return 25
                }else if(val[2]<=10000){
                  return 10
                }else if(val[2]<=100000 && val[2]>10000){
                  return 12
                }else if(val[2]<=200000 && val[2]>100000){
                  return 14
                }else if(val[2]<=500000 && val[2]>200000){
                  return 16
                }else if(val[2]<=1000000 && val[2]>500000){
                  return 18
                }else if(val[2]>1000000){
                  return 20
                }
              }else {
                return 1;
              }

            },
            itemStyle: {
              normal: {
                color: function (e){
                  if(e.data.value[3] === '深圳'){
                    return '#00FF00'
                  }else {
                    return color2[i]
                  }
                }
              }
            },
            data: function (){
              let list = [
                {
                  name:'',
                  value:geoCoordMap[item[0]].concat([200])
                }
              ]
              list = list.concat(item[1].map(function (dataItem) {
                console.log('dataItem',dataItem)
                if(geoCoordMap[dataItem.endName]){
                  return {
                    name: dataItem.endName,
                    value: geoCoordMap[dataItem.endName].concat([dataItem.value,dataItem.endName])
                  };
                }
                if(dataItem.endName === '深圳'){
                  console.log('dataItem.endName', dataItem.endName)
                }
                return {
                  name: dataItem.endName,
                  value: []
                };
              }))
              console.log('list', list)
              return list
            }()
          });
        });
        let option = {
          tooltip: {
            show: false
          },
          geo: {
            map: 'china',
            scaleLimit:{
              min:0.5,
              max:10,
            },
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                borderColor: '#050D4B',
                borderWidth: 1,
                areaColor: 'rgb(8,12,52)',
                shadowColor:"rgba(69, 148, 246, 1)",
                shadowOffsetX:0,
                shadowOffsetY:8,
                //areaColor: '#389BB7',
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              }
            },
            zoom:1.2
          },
          series: series
        };
        option && chart1.setOption(option);
      },
      //获取今日激活数检测
      getActivatedCount(){
        getActivatedCount(this,{
          areaType:1
        }).then(res=>{
          let data = res.data.data ||{}
          this.activatedCount = data;
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": {
        //     "todayCount": 420,
        //     "yesterdayCount": 650,
        //     "monthCount": 180000,
        //     "historyCount": 1020
        //   },
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.activatedCount = res.data;
      },
      format(e,type){
        console.log(type)
        return this.activatedCount.yesterdayCount
      },
      format2(e,type){
        console.log(type)
        return this.activatedCount.monthCount
      },
      format3(e,type){
        console.log(type)
        return this.activatedCount.historyCount
      },
      format4(e,type){
        console.log(type)
        return this.activatedCount.yearHistoryCount
      },
      //计算占比
      mathPricent(key){
        let count = this.activatedCount[key]? this.activatedCount[key] : 0;
        let total = this.activatedCount.todayCount + this.activatedCount.monthCount + this.activatedCount.historyCount + this.activatedCount.yearHistoryCount;
        return Number((count/total).toFixed(2))*100
      },
      disposeEcharts(){
        let list = ['map','toDayCheck','monthMax','monthMaxCountries','monthNewCount','facilityTypeRatio']
        list.forEach(item=>{
          if(document.getElementById(item)){
            var chart1 = echarts.init(document.getElementById(item))
            chart1.clear()
            chart1.dispose()
          }
        })
      },
    },
    beforeDestroy() {
      window.clearInterval(this.timer)
      this.disposeEcharts()
    },
    destroyed() {

    }
  }
</script>
<style scoped src="./index.css">

</style>
